<template>
  <div ref="chart" class="chart-container"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'EChartComponent',
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.resizeChart);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.resizeChart);
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      this.setChartOptions();
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    setChartOptions() {
      const option = {
        title: {
          text: 'ECharts example'
        },
        tooltip: {},
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [{
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      };
      this.chart.setOption(option);
    }
  }
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
